<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>而立视觉工作室-平面|企宣|微电影</title>

		<meta name="author" content="ElegantXu"/>

		<link rel="shortcut icon" href="img/favicon.png">

		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/style-responsive.css" />

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

</head>

<body>


<div class="preloader" id="preloader">
    <div class="item">
      <img src="img/loading.gif">
    </div>
</div>


<div class="container">


<!-- section start-page -->

  <section class="start-page parallax-background" id="home">

    <div class="opacity"></div> <!-- Opacity color -->
      <div class="content">
        <div class="text">

          <div class="logo"><img src="img/logo.png"></div>

          <h1>平面 | 企宣 | 微电影</h1><hr/>
          <p>眼睛是最精密的人体器官</p>
          <p>影像是最敏感的信息形态</p>
          <p>所以对待一件视觉作品</p>
          <p>我们永远诚惶诚恐</p>

          <a href="#about-us"><div class="read-more">了解更多</div></a>

        </div>
        <div class="arrow-down"></div>
      </div>

  </section>

  <!-- section menu mobile -->

  <section class="menu-media">

    <div class="menu-content">

      <div class="logo">Onepage</div>

      <div class="icon"><a href="#"><img src="img/icons/menu-media.png" /></a></div>

    </div>

  </section>

    <ul class="menu-click">
        <a href="#home"><li href="#home">首页</li></a>
        <a href="#about-us"><li href="#about-us">关于而立</li></a>
        <a href="#portfolio"><li href="#portfolio">视觉的手艺</li></a>
        <a href="#contact"><li href="#contact">联系我们</li></a>
        <a href="#weibo"><li href="#contact">我们的微博</li></a>
    </ul>


  <!-- section menu -->

  <section class="menu">

    <div class="menu-content">

      <img class="logo" src="img/logo_nav.png" />

      <ul id="menu">
        <li><a href="#home">首页</a></li>
        <li><a href="#about-us">关于而立</a></li>
        <li><a href="#portfolio">视觉的手艺</a></li>
        <li><a href="#contact">联系我们</a></li>
        <li><a target="_blank" href="http:\/\/weibo.com\/elitevisualstudio">我们的微博</a></li>
      </ul>
    </div>


  </section>


  <!-- section about us -->

  <section class="about-us" id="about-us">

  <div class="content">

    <h1>关于而立</h1>
    <hr/>
    <p class="title">关于我们的工作</p>
    <p class="title">你可以称为平面设计、宣传片和微电影制作</p>
    <p class="title">而我们自己则喜欢叫作</p>
    <p class="title title_bottom">关于视觉的手艺</p>
    <p class="title">我们的主要手艺人包括</p>
    <p class="title">一个超过六年工作经验的电视编导</p>
    <p class="title">一个超过八年工作经验的平面设计师</p>
    <p class="title title_bottom">当然，还有他们一群合作伙伴</p>
    <p class="title">我们愿意怀着近乎偏执的专注</p>
    <p class="title">虔诚地打磨每一件出品</p>
    <p class="title">呈献给同样挑剔的你</p>

      <div class="column column-one">

        <div class="circle-one"></div>

          <h2>平面设计</h2>
          <p>VI设计 | 标志设计 |  包装设计</p>
          <p>画册折页设计 | 宣传物料设计</p>

      </div>

      <div class="column column-two">

        <div class="circle-two"></div>

          <h2>视觉传播</h2>
          <p>宣传片 | 微电影 | TVC广告片</p>
          <p>婚礼短片</p>

      </div>


      <div class="column column-three">

        <div class="circle-three"></div>

        <h2>网络建设</h2>
        <p>网站平台建设 | 微信营销</p>
        <p>APP互动展示 | 淘宝店铺设计</p>

    </div>

  </div>

  </section>

  <div class="clear"></div>

  <!-- portoflio-->

  <section class="portfolio" id="portfolio">


    <div class="portfolio-margin">

      <h1>视觉的手艺</h1>
      <hr/>

    <!-- 1 item portoflio-->

        <ul class="grid">

          <li>
            <a href="#">
              <img src="img/portfolio/1.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_one">LOGO设计</p>
                  <p class="description">C-cube服装设计</p>
              </div>
            </a>
          </li>

          <!-- 2 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/2.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_one">UI设计</p>
                  <p class="description">iMiumiu音乐APP</p>
              </div>
            </a>
          </li>

          <!-- 3 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/3.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_one">VI品牌形象设计</p>
                  <p class="description">C-cube服装潮牌</p>
              </div>
            </a>
          </li>


          <!-- 4 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/4.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_two">装帧封面设计</p>
                  <p class="description">守山人</p>
              </div>
            </a>
          </li>

          <!-- 5 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/5.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_one">微电影</p>
                  <p class="description">温德姆酒店2015婚博会</p>
              </div>
            </a>
          </li>


          <!-- 6 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/6.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_three">网页设计</p>
                  <p class="description">分贝耳机品牌</p>
              </div>
            </a>
          </li>

         <!-- 7 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/7.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_one">杂志设计</p>
                  <p class="description">旅行日志</p>
              </div>
            </a>
          </li>

          <!-- 8 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/8.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_one">包装设计</p>
                  <p class="description">乡陶陶土社</p>
              </div>
            </a>
          </li>

          <!-- 9 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/9.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_one">公益宣传片</p>
                  <p class="description">佛山地税乐从分局</p>
              </div>
            </a>
          </li>

          <!-- 10 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/10.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_three">店铺页面设计</p>
                  <p class="description">温小婉的店_宛若水仙</p>
              </div>
            </a>
          </li>

          <!-- 11 item portoflio-->

          <li>
            <a href="#">
              <img src="img/portfolio/11.png" alt="Portfolio item" />
                <div class="text">
                  <p class="p_one">企业宣传片</p>
                  <p class="description">佛山石湾酒厂</p>
              </div>
            </a>
          </li>



        </ul>

   <a href="tmpl/morework/morework.html"><div class="read-more">更多作品</div></a>

   </div>

   </section>


   <div class="clear"></div>




    <!-- partners-->

    <section class="partners parallax-background-partners" id="partners">

    <div class="opacity"></div>

      <div class="content">

        <h2>我们的新朋友</h2>

            <div class="logo">
                <img class="img1" src="img/logos/1.png">
                <img class="img2" src="img/logos/2.png">
                <img class="img3" src="img/logos/3.png">
                <img class="img4" src="img/logos/4.png">
            </div>

      </div>

    </section>


    <!-- Contact-->

    <section class="contact" id="contact">
        <h1>联系我们</h1>
        <hr/>

        <div class="content">

          <div class="code_wrap">
              <img src="img/code/code_1.png"></img>
              <span class="line_bold"></span>
              <span class="text">关注而立视觉工作室微博交流分享设计经验</span>
              <span class="line_normal"></span>
          </div>

          <div class="code_wrap">
              <img src="img/code/code_2.png"></img>
              <span class="line_bold"></span>
              <span class="text">关注而立视觉微信公众号获得更多工作室动态</span>
              <span class="line_normal"></span>
          </div>


          <div class="contact-text">

            <span>您正在找我吗，正好我也在找您。不如我们找个时间聊一聊。 </span>

            <span class="first">你一定需要这个电话：</span>
            <span>平面：159 1906 8001  Mr.王</span>
            <span>影视：185 6641 1512  Mr.陈</span>

            <span class="first">记下这个邮箱或QQ会对你有用：</span>
            <span class="qq"><img class="img_1" src="img/contact/qq.png" alt="" />3145978003</span>
            <span class="email"><img class="img_2" src="img/contact/email.png" alt="" />3145978003@qq.com</span>

          </div>


        </div>

    </section>


    <section class="footer">

        <div class="logo"><img src="img/logo_footer.png"></div>
        <div class="menu-footer">

          <a href="#home">首页</a>
          <a href="#about-us">关于而立</a>
          <a href="#portfolio">视觉的手艺</a>
          <a href="#partners">我们的新朋友</a>
          <a href="#contact">联系我们</a>

        </div>

        <div class="copyright">© 2015. All Rights Reserved Elite Visual Studio</div>


    </section>


</div>



	<!-- Scripts -->

	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="js/jquery.sticky.js"></script>
	<script src="js/masonry.pkgd.min.js"></script> <!-- All script -->
	<script src="js/imagesloaded.pkgd.min.js"></script> <!-- All script -->
  <script>
     $(function(){

       var $container = $('.grid');

       $container.imagesLoaded( function(){
         $container.masonry({
           itemSelector : 'li'
         });
       });

     });
  </script>
  <script src="js/jquery.parallax.js"></script> <!-- jQuery Parallax -->
	<script src="js/script.js"></script> <!-- All script -->


</body>

</html>
